﻿<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery EasyUI</title>
	<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../themes/icon.css">
	<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
	<script type="text/javascript" src="../jquery.easyui.min.js"></script>
	<script>
		var index = 0;
		function addTab(){
			index++;
			$('#tt').tabs('add',{
				title:'New Tab ' + index,
				content:'Tab Body ' + index,
				closable:true
			});
		}
	</script>
</head>
<body>
	<h1>Tabs</h1>
	<div>
		<a class="easyui-linkbutton" icon="icon-add" href="javascript:void(0)" onclick="addTab()">add tab</a>
	</div>
	<br/>
	<div id="tt" class="easyui-tabs" style="width:500px;height:250px;">
		<div title="Tab1" style="padding:20px;display:none;">
		</div>
		<div title="Tab2" closable="true" style="overflow:auto;padding:20px;display:none;" cache="false" href="tabs_href_test.html"> This is Tab2 width close button.</div>
		<div title="Tab3" icon="icon-reload" closable="true" style="padding:20px;display:none;">
		<table id="test" class="easyui-datagrid" fit="true">
			<thead>
				<tr>
					<th field="f1" width="60">field1</th>
					<th field="f2" width="60">field2</th>
					<th field="f3" width="60">field3</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>d1</td>
					<td>d2</td>
					<td>d3</td>
				</tr>
				<tr>
					<td>d11</td>
					<td>d21</td>
					<td>d31</td>
				</tr>
			</tbody>
		</table>
		</div>
		<div title="Tab4 with iframe" closable="true" style="width:100%;height:100%;display:none;">
			<iframe scrolling="yes" frameborder="0"  src="http://www.google.com" style="width:100%;height:100%;"></iframe>
		</div>
		<div title="Tab5 with sub tabs" closable="true" icon="icon-cut" style="padding:10px;display:none;">
			<div class="easyui-tabs" fit="true" plain="true" style="height:100px;width:300px;">
				<div title="Title1">Content 1</div>
				<div title="Title2">Content 2</div>
				<div title="Title3">Content 3</div>
			</div>
		</div>
	</div>
</body>
</html>